<template>
    <el-row :gutter="10">
        <el-col :span="2">
            <div class="grid-content ep-bg-purple" />姓名：
        </el-col>
        <el-col :span="8">
            <div class="grid-content ep-bg-purple" /><el-input v-model="input" style="width: 240px"
                placeholder="Please input" />
        </el-col>
    </el-row>
    <el-row :gutter="10">
        <el-col :span="2">
            <div class="grid-content ep-bg-purple" />性别：
        </el-col>
        <el-col :span="8">
            <div class="grid-content ep-bg-purple" />
            <div class="mb-2 flex items-center text-sm">
                <el-radio-group v-model="radio1" class="ml-4">
                    <el-radio value="男" size="large">男</el-radio>
                    <el-radio value="女" size="large">女</el-radio>
                </el-radio-group>
            </div>
        </el-col>
    </el-row>
    <el-row :gutter="10">
        <el-col :span="2">
            <div class="grid-content ep-bg-purple" />爱好：
        </el-col>
        <el-col :span="8">
            <div class="grid-content ep-bg-purple" />
            <div>
                <el-checkbox v-model="checked1" label="Option 1" size="large" />
                <el-checkbox v-model="checked2" label="Option 2" size="large" />
                <el-checkbox v-model="checked3" label="Option 3" size="large" />
                <el-checkbox v-model="checked4" label="Option 4" size="large" />
            </div>
        </el-col>
    </el-row>
    <el-row :gutter="10">
        <el-col :span="2">
            <div class="grid-content ep-bg-purple" />我的口号：
        </el-col>
        <el-col :span="8">
            <div class="grid-content ep-bg-purple" />
            <div style="margin: 20px 0" />
            <el-input v-model="textarea2" style="width: 240px" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
                placeholder="Please input" />
        </el-col>
    </el-row>
    <el-row :gutter="10">
        <el-col :span="2">
            <div class="grid-content ep-bg-purple" />
        </el-col>
        <el-col :span="8">
            <div class="grid-content ep-bg-purple" />
            <div class="mb-4">
                <el-button type="primary">提交</el-button>
            </div>
        </el-col>
    </el-row>
</template>

<style>
.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
</style>


<script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
const radio1 = ref('1')
const checked1 = ref(false)
const checked2 = ref(false)
const checked3 = ref(false)
const checked4 = ref(false)
const textarea2 = ref('')
import {
  Check,
} from '@element-plus/icons-vue'
</script>